<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>

<body>
    <div id="box"></div>
    <script>
        let box = document.querySelector('#box')
        let boxX, boxY, mouseX, mouseY

        box.onmousedown= function(e) {
            // 获取盒子距离浏览器可视窗口的水平距离和垂直距离
            boxX = this.offsetLeft
            boxY = this.offsetTop
            // 获取鼠标距离浏览器可视窗口的水平距离和垂直距离
            mouseX = e.clientX
            mouseY = e.clientY
            
            // 鼠标移动事件
            document.onmousemove = function(e){
               // 获取移动后的水平偏移量和垂直偏移量
            let moveX = e.clientX - mouseX
            let moveY = e.clientY - mouseY
            // 令盒子移动：移动前的位置 + 移动后的位置
            box.style.left = moveX + boxX + "px"
            box.style.top = moveY + boxY + "px"  
            }
            // 鼠标移出事件
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null
            }
        }

        // 鼠标按下
       

        function move(e) {
           
        }

        function up(){
            document.removeEventListener('mousemove')
                document.removeEventListener('mouseup')
        }
    </script>
</body>

</html>